import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';

export interface TopMenu {
  id: number;
  title: string;
  link: string;
}

@Component({
  selector: 'app-scrollable-tab',
  templateUrl: './scrollable-tab.component.html',
  styleUrls: ['./scrollable-tab.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
/**
 * 接口是可选的，也就是说只要有类似 `ngOnInit` 这样的方法存在
 * 生命周期的狗子函数还是可以正常执行
 * 但建议实现接口，好处一个是不会由于误删除某个狗子函数
 * 另一个是对组件设计到哪些生命周期一目了然
 */
export class ScrollableTabComponent implements OnInit {
  @Input() selectedTabLink: string;
  @Input() menus: TopMenu[] = [];
  @Input() backgroundColor = '#fff';
  @Input() titleActiveColor: 'yellow';
  @Input() titleColor: 'blue';
  @Input() indicatorColor: 'brown';
  @Output() tabSelected = new EventEmitter();

  /**
   * 构造函数永远首先被调用
   */
  constructor() {
    console.log('组件构造调用');
  }

  /**
   * 组件初始化完成，在这个函数中，我们可以安全的使用组件的属性和方法
   */
  ngOnInit(): void {
    console.log('组件初始化');
  }

  handleSelection(i: number): void {
    this.tabSelected.emit(this.menus[i]);
  }
}
